<template>
  <view class="checkout-page">
    <!-- 顶部导航栏 -->
<!--    <view class="header-nav">
      <view class="nav-content">
        <view class="back-btn" @click="goBack">
          <text class="iconfont-v2 icon-youjiantou back-icon" style="transform: rotate(180deg);"></text>
        </view>
        <view class="page-title">订单确认</view>
        <view class="header-actions">
          <text class="iconfont-v2 icon-gengduo more-icon"></text>
        </view>
      </view>
    </view> -->
	<view class="header-list">
		<!-- 地址选择 -->
		<view class="address-section" @click="selectAddress">
		  <view class="address-content">
			<text class="section-label">选择收货人地址</text>
			<text class="iconfont-v2 icon-youjiantou arrow-icon"></text>
		  </view>
		</view>
		<!-- 分割线 -->
		<view class="header-divider"></view>
		<!-- 配送时间 -->
		<view class="delivery-section">
		  <view class="delivery-content">
			<view class="delivery-time">
			  <text class="time-label">送出时间</text>
			  <text class="time-value">大概11:45送达</text>
			</view>
			<view class="delivery-option">
			  <button class="immediate-delivery-btn">
				<text>立即配送</text>
			  </button>
			</view>
		  </view>
		</view>
	</view>	

	<view class="product-box">
    <!-- 商品列表 -->
    <view class="product-list">
		  <view class="product-item" v-for="(product, index) in products" :key="index">
			<view class="product-image">
			  <image :src="product.image" :alt="product.name" />
			</view>
			<view class="product-info">
			  <view class="product-name">{{ product.name }}</view>
			  <view class="product-popularity">{{ product.wantCount }}人想要</view>
			</view>
			<view class="product-price">
			  <view class="price">¥{{ product.price }}</view>
			  <view class="quantity">x{{ product.quantity }}</view>
			</view>
			
		  </view>
		</view>
		<!-- 费用明细 -->
		<view class="cost-breakdown">
			
		  <view class="cost-item">
			<text class="cost-label">包装费</text>
			<text class="cost-value">¥{{ costs.packagingFee }}</text>
		  </view>
		  <view class="cost-item">
			<text class="cost-label">配送费</text>
			<text class="cost-value">¥{{ costs.deliveryFee }}</text>
		  </view>
		
		</view>
		<view class="cost-summary">
			<text class="summary-text">共{{ totalItems }}件,需付</text>
			<text class="summary-price">¥{{ costs.subtotal }}</text>
		</view>
	</view>
    <!-- 备注 -->
    <view class="notes-section">
      <view class="notes-header">备注</view>
      <view class="notes-input">
        <textarea 
          class="notes-textarea"
          placeholder="写下你对商家的留言"
          v-model="notes"
        ></textarea>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view class="bottom-bar">
      <view class="total-info">
        <text class="total-label">合计:</text>
        <text class="total-price">¥{{ totalPrice }}</text>
      </view>
      <button class="checkout-btn" @click="submitOrder">
        <text>去结算</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {

      notes: "",

      // 商品数据
      products: [
  {
    id: 1,
    name: "意大利超火的球鞋",
    image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
    price: 17,
    quantity: 1,
    wantCount: 500
  },
  {
    id: 2,
    name: "意大利超火的小皮鞋",
    image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
    price: 17,
    quantity: 1,
    wantCount: 500
  }
],
      // 费用明细
      costs: {
        packagingFee: 17,
        deliveryFee: 17,
        subtotal: 17
      }
    }
  },

  computed: {
    totalItems() {
      return this.products.reduce((total, product) => total + product.quantity, 0);
    },
    totalPrice() {
      const productsTotal = this.products.reduce((total, product) => 
        total + (product.price * product.quantity), 0);
      return (productsTotal + this.costs.packagingFee + this.costs.deliveryFee).toFixed(1);
    }
  },

  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectAddress() {
      console.log('选择收货地址');
      // 这里可以跳转到地址选择页面
      uni.navigateTo({
        url: '/pages/fast/my-address-list'
      });
    },
    submitOrder() {
      const orderData = {
        products: this.products,
        costs: this.costs,
        notes: this.notes,
        totalPrice: this.totalPrice
      };
      
      console.log('提交订单:', orderData);
      uni.showToast({
        title: '订单提交成功！',
        icon: 'success'
      });
      
      // 这里可以跳转到订单详情或支付页面
      // uni.navigateTo({
      //   url: '/pages/fast/order-detail'
      // });
    }
  }
}
</script>

<style lang="scss" scoped>
.checkout-page {
  min-height: 100vh;
  // background: linear-gradient(180deg, #FFD700 0%, #ED6567 50%, #FFFFFF 100%);
  // background-size: 100% 200rpx;
  // background-repeat: no-repeat;
  // background-color: #f5f5f5;
  padding-bottom: 160rpx;
}

.header-nav {
  background: transparent;
  padding: 20rpx 30rpx;
  padding-top: 80rpx;
  
  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .back-btn {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      
      .back-icon {
        font-size: 40rpx;
        color: #333;
      }
    }
    
    .page-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
    
    .header-actions {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .more-icon {
        font-size: 36rpx;
        color: #666;
        cursor: pointer;
      }
    }
  }
}
.header-list {
    background: white;
    margin: 30rpx;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    overflow: hidden;
	.header-divider {
	  height: 2rpx;
	  background: repeating-linear-gradient(
	    to right,
	    transparent,
	    transparent 16rpx,
	    #ddd 32rpx,
	    #ddd 32rpx
	  );
	  margin: 0 20rpx;
	}

 
	.address-section {
	  background: white;
	  margin: 0rpx 30rpx;
	  border-top-left-radius: 24rpx;
	  border-top-right-radius: 24rpx;
	  //box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	  cursor: pointer;
	  
	  .address-content {
		padding: 30rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.section-label {
		  font-size: 32rpx;
		  color: #2E343A;
		  font-weight: 500;
		}
		
		.arrow-icon {
		  font-size: 32rpx;
		  color: #000000;
		}
	  }
	}

	.delivery-section {
	  background: white;
	  margin: 0 30rpx;
	  border-bottom-left-radius: 24rpx;
	  border-bottom-right-radius: 24rpx;
	  //box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	  
	  .delivery-content {
		padding: 30rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.delivery-time {
		  display: flex;
		  align-items: center;
		  gap: 16rpx;
		  
		  .time-label {
			font-size: 32rpx;
			color: #2E343A;
		  }
		  
		  .time-value {
			font-size: 32rpx;
			color: #FFB226;
			font-weight: 500;
		  }
		}
		
		.immediate-delivery-btn {
		  //background: #ED6567;
		  color: white;
		  border: none;
		  border-radius: 6rpx;
		  padding: 12rpx 0rpx;
		  font-size: 28rpx;
		  cursor: pointer;
		  transition: all 0.3s ease;
		  color:#2E343A;
		  
		  &:hover {
			background: #357ABD;
		  }
		}
	  }
	}
 }
.divider {
  height: 2rpx;
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent 16rpx,
    #ddd 32rpx,
    #ddd 32rpx
  );
  margin: 30rpx;
}
.product-box {
    background: white;
    margin: 30rpx;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    overflow: hidden;
	.product-list {
		border-bottom: 1px dashed #f0f0f0;
	  .product-item {
		padding: 30rpx;
		display: flex;
		align-items: center;
		gap: 24rpx;
		&:last-child {
		  border-bottom: none;
		}
		
		.product-image {
		  width: 120rpx;
		  height: 120rpx;
		  border-radius: 8rpx;
		  overflow: hidden;
		  
		  img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		  }
		}
		
		.product-info {
		  flex: 1;
		  
		  .product-name {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 8rpx;
		  }
		  
		  .product-popularity {
			font-size: 26rpx;
			color: #666;
		  }
		}
		
		.product-price {
		  text-align: right;
		  
		  .price {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 4rpx;
		  }
		  
		  .quantity {
			font-size: 26rpx;
			color: #666;
		  }
		}
	  }
	}

	.cost-breakdown {
	  // background: white;
	  // margin: 30rpx;
	  // border-radius: 24rpx;
	  // box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	  //padding: 30rpx;
	  margin: 30rpx;
	  .cost-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		&:last-of-type {
		  margin-bottom: 30rpx;
		}
		
		.cost-label {
		  font-size: 30rpx;
		  color: #9098A0;
		}
		
		.cost-value {
		  font-size: 30rpx;
		  color: #9098A0;
		  font-weight: 500;
		}
	  }
	  
	}
	.cost-summary {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 16rpx;
			padding-top: 24rpx;
			border-top: 2rpx dashed #f0f0f0;
			padding: 30rpx;
			.summary-text {
			  font-size: 30rpx;
			  color: #2E343A;
			}
			
			.summary-price {
			  font-size: 30rpx;
			  color: #e74c3c;
			  font-weight: 600;
			}
	}
}
.notes-section {
  background: white;
  margin: 30rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  
  .notes-header {
    padding: 30rpx 30rpx 20rpx;
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
  
  .notes-input {
    padding: 0 30rpx 30rpx;
    
    .notes-textarea {
      width: 100%;
	  height: 200rpx;
      min-height: 160rpx;
      border: 2rpx solid #f0f0f0;
      border-radius: 8rpx;
      padding: 24rpx;
      font-size: 28rpx;
      color: #333;
      resize: vertical;
      outline: none;
      transition: border-color 0.3s ease;
      background-color: #F9F9F9;
      &:focus {
        border-color: #ED6567;
      }
      
      &::placeholder {
        color: #999;
      }
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
  
  .total-info {
    display: flex;
    align-items: center;
    gap: 16rpx;
    
    .total-label {
      font-size: 32rpx;
      color: #333;
    }
    
    .total-price {
      font-size: 40rpx;
      color: #333;
      font-weight: 600;
    }
  }
  
  .checkout-btn {
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    padding: 24rpx 48rpx;
    font-size: 32rpx;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: #357ABD;
      transform: translateY(-4rpx);
      box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.4);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
  
 
}
</style>
